<template>
  <el-card class="top-search content-card">
    <template #header>
      <span>热门搜索</span>
      <div class="card-header-extra">
        <el-dropdown class="dropdown-options">
          <span class="title-tip-icon"><SvgIcon icon="more-line"/></span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>操作一</el-dropdown-item>
              <el-dropdown-item>操作二</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </template>

    <el-row :gutter="16" class="user-search">
      <el-col :span="12">
        <div class="user-search-info">
          <span>搜索用户数</span>
          <el-tooltip content="指标说明" effect="dark" placement="top">
            <span class="title-tip-icon">
              <SvgIcon icon="info-circle-outlined"/>
            </span>
          </el-tooltip>
        </div>
        <div class="user-search-chart">
          <VChart :loading="useSearchLoading" :option="option" autoresize/>
        </div>
      </el-col>

      <el-col :span="12" class="user-search-info">
        <div class="user-search-info">
          <span>人均搜索次数</span>
          <el-tooltip content="指标说明" effect="dark" placement="top">
            <span class="title-tip-icon">
             <SvgIcon icon="info-circle-outlined"/>
            </span>
          </el-tooltip>
        </div>
        <div class="user-search-chart">
          <VChart
              :loading="useSearchLoading"
              :option="option"
              autoresize
          />
        </div
        >
      </el-col>
    </el-row>

    <div class="top-search-table">
      <el-table v-loading="loading" :data="tableData.slice((pagination.pageNum - 1) * pagination.pageSize, pagination.pageNum * pagination.pageSize)" header-cell-class-name="table-header-cell">
        <TableColumn :columns="columns">
          <template #keyword="scope">
            <el-button link size="small" type="primary">
              {{ scope.row.keyword }}
            </el-button>
          </template>
          <template #range="scope">
            <Trend :flag="scope.row.status === 1 ? 'up' : 'down'">
              {{ scope.row.range }}%
            </Trend>
          </template>
        </TableColumn>
      </el-table>

      <el-pagination :current-page="pagination.pageNum"
                     :page-size="pagination.pageSize"
                     :total="pagination.totalCount"
                     layout="  prev, pager, next"
                     size="small"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"/>
    </div>
  </el-card>
</template>
<script lang="ts" setup>
import { computed, reactive, ref } from 'vue';
import useLoading from '@/hooks/use-loading';
import Trend from '@/components/trend/index.vue';
import VChart from 'vue-echarts';
import TableColumn, { TableColumnData } from '@/components/table-column/index.vue';
import { Pagination } from '@/api';
import { SvgIcon } from '@/components/icon';
import dayjs from 'dayjs';
import { AxisData, TopSearchData } from '@/api/dashboard.ts';

const pagination = reactive<Pagination>({
  pageNum: 1,
  pageSize: 5,
  totalCount: 0,
});
const [useSearchLoading, setUseSearchLoading] = useLoading(true);
const [loading, setLoading] = useLoading(false);
const optionData = ref<[string[], number[]]>([[], []]);
let tableData = ref<TopSearchData[]>([]);

// =========================== 搜索用户 =======================
const option = computed(() => {
  return {
    xAxis: {
      type: 'category',
      data: optionData.value[0],
      boundaryGap: false,
      show: false,
      axisPointer: {
        show: true,
        lineStyle: {
          color: '#c6e2ff',
          width: 1,
        },
      },
    },
    yAxis: {
      type: 'value',
      show: false,
    },
    tooltip: {
      trigger: 'axis',
    },
    series: [
      {
        name: '',
        data: optionData.value[1],
        type: 'line',
        smooth: true, // 平滑处理
        symbolSize: 2, // 标记的大小，
        color: '#1a53ff',
        lineStyle: {
          width: 1,
          color: '#1a53ff',
        },
        emphasis: {
          disabled: true, // 关闭高亮状态可以在鼠标移到图形上，tooltip 触发，
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: '#ecf5ff',
        },
      },
    ],
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
    },
  };
});
const fetchUseSearchDataList = async () => {
  setUseSearchLoading(true);
  try {
    const searchUserData: AxisData[] = [];
    const searchUserY = [64, 85, 84, 75, 67, 56, 48, 52, 55, 34, 45, 36, 55, 67, 84,];
    const visitY = [5, 6, 9, 8, 4, 2, 3, 5, 1, 6, 8, 4, 7, 5, 6];
    for (let i = visitY.length - 1; i >= 0; i--) {
      searchUserData.push({
        x: dayjs().subtract(i, 'day').format('YYYY-MM-DD'),
        y: searchUserY[i],
      });
    }
    searchUserData.forEach(({x, y}) => {
      optionData.value[0].push(x);
      optionData.value[1].push(y);
    });

    // const {data} = await getSearchUserData();
    // data.forEach(({x, y}) => {
    //   optionData.value[0].push(x);
    //   optionData.value[1].push(y);
    // });
  } catch (err) {
  } finally {
    setUseSearchLoading(false);
  }
};
fetchUseSearchDataList();

// =========================== 表格 =======================
const columns = computed<TableColumnData[]>(() => [
  {type: 'index', label: '排名', 'min-width': 55, align: 'center'},
  {prop: 'keyword', label: '搜索关键词', 'min-width': 120, align: 'center'},
  {prop: 'userNum', label: '用户数', 'min-width': 70, align: 'center'},
  {prop: 'range', label: '涨幅', 'min-width': 70, align: 'center'},
]);
const fetchDataList = async () => {
  setLoading(true);
  try {
    const topSearchList: TopSearchData[] = [];
    for (let i = 1; i < 53; i++) {
      topSearchList.push({
        id: i,
        keyword: `搜索关键词${i}`, //
        userNum: Math.floor(Math.random() * 1000), //用户数
        range: Math.floor(Math.random() * (30 - 10 + 1)) + 10, //涨幅
        status: Math.random() < 0.5 ? 0 : 1,
      });
    }
    tableData.value = topSearchList;
    pagination.totalCount = topSearchList.length;

    // const {data} = await getTopSearchData({
    //   pageNum: pagination.pageNum,
    //   pageSize: pagination.pageSize,
    // });
    // tableData.value = data.list;
    // pagination.totalCount = data.total;
  } catch (err) {
  } finally {
    setLoading(false);
  }
};

fetchDataList();

const handleSizeChange = (val) => {
  pagination.pageNum = 1;
  pagination.pageSize = val;
  //fetchDataList();
};
const handleCurrentChange = (val) => {
  pagination.pageNum = val;
  //fetchDataList();
};
</script>

<style lang="scss" scoped>
.top-search {
  height: 100%;

  :deep(.el-card__header) {
    line-height: 32px;
  }

  .user-search {
    .user-search-info {
      height: 22px;
      line-height: 22px;
      color: var(--el-text-color-regular);

      .title-tip-icon {
        margin-left: 6px;
        vertical-align: -0.22rem;
      }
    }

    .user-search-chart {
      height: 60px;
      width: 100%;
      margin-top: 2px;
    }
  }

  .top-search-table {
    margin-top: 12px;

    :deep(.el-table) {
      .table-header-cell {
        font-size: 13px;
        color: var(--el-text-color-regular);
      }

      .el-table__body {
        td {
          padding: 6px 0;

          .cell {
            font-size: 12px;
          }
        }
      }
    }

    .el-pagination {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 10px;
    }
  }
}
</style>
